import axios from 'axios'
import store from '@/store/index.js'
import router from '@/router/index.js';
import { Message } from 'element-ui'
import { getToken, rmToken } from '@/utils/authStore.js';

const codeMessage = {
  400: '请求错误',
  401: '登录状态失效，请重新登录',
  403: '拒绝访问',
  404: '请求地址不存在',
  500: '服务器错误，请稍后再试',
  502: '网关错误',
  503: '服务不可用，服务器暂时过载或维护',
  504: '网关超时'
}


const request = axios.create({
  baseURL: process.env.VUE_APP_API_HOST,
  timeout: 20000,
})

// request拦截器
request.interceptors.request.use(config => {
  store.getters.token && (config.headers['Authorization'] = store.getters.token)
  return config
}, error => {
  Message.error({ message: '请求超时！' })
  Promise.reject(error)
})

// response拦截器
request.interceptors.response.use(response => {
  // 可以通过返回的code标示请求状态，如通过 XMLHttpRequest状态码标示，逻辑可写在error中
  let { status } = response
  if (status === 200) {
    return response
  } else {
    Message.error({ message: '请求code !== 200' })
    return Promise.reject(response)
  }
}, error => {
  if (error.response) {
    // 发出了请求，服务器返回的状态码不在2xx范围内
    errorShowMsg(error.response.status)
  } else if (error.request) {
    // 已发出请求，但是未收到回复
    // error.request 在浏览器环境是 XMLHttpRequest 的实例
    console.log(error.request);
    Message.error({ message: '服务错误' })

  } else {
    // Something happened in setting up the request that triggered an Error
    console.log('Error', error.message);
    Message.error({ message: '服务错误' })

  }


  return Promise.reject(error)
})

async function errorShowMsg(code) {
  if (code === 401) {
    if (getToken()) {
      Message.$confirm('You have been logged out,please log in again!', '提示', {
        confirmButtonText: '登录',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        window.location.reload()
      })
    }
    rmToken()  //这步很巧妙，然后把401处理逻辑交给router统一管理
  } else {
    Message.error({ message: codeMessage[code] })
  }
}

export default request
